var boxP = document.querySelector(".box p");
var date = new Date();
if (date.getHours() < 10) {
    boxP.innerHTML = '早上好，打工人';
} else if (date.getHours() < 12) {
    boxP.innerHTML = '中午好，干饭人';
} else if (date.getHours() < 17) {
    boxP.innerHTML = '下午好，打工人';
} else {
    boxP.innerHTML = '晚上好，***';
}

$(function () {
    //1.模态框制作
    // 出现模态框和遮罩层
    $('.box').slideDown();
    $('.bg').fadeIn();
    // 点击确定，模态框消失
    $('.box button').click(function () {
        $(this).parent().slideUp();
        $('.bg').fadeOut();
    })

    //footer点击效果
    //先设置默认
    $(".footer a").eq(0).children('div').css("color", "#2db5fb");
    $(".footer a").eq(0).children('span').css("color", "#2db5fb");
    // 再设置点击
    $('.footer a').click(function () {
        $(this).children('div').css("color", "#2db5fb");
        $(this).children('span').css("color", "#2db5fb");
        $(this).siblings("a").children('div').css("color", "");
        $(this).siblings("a").children('span').css("color", "");

        var index = $(this).index();
        $(".w").eq(index).show();
        $(".w").eq(index).siblings(".w").hide();
    })


    //每日一记本地存储效果
    load();
    //enter输入
    $("#title").on("keyup", function (e) {
        if ($(this).val() === "") {
            alert("宁还木有输入内容哦~");
        } else {
            //判断enter键
            if (e.keyCode === 13) {
                //先读取本地存储原来的数据
                var local = getData();
                // console.log(local);
                //把新数据追加给local数组 数组里面是一个个对象
                local.push({ title: $(this).val(), done: false });
                saveData(local);
                //页面渲染
                load();

                $(this).val("");
            }
        }
    });

    //删除操作
    $(".center ol,.center ul").on("click", "a", function () {
        //先获取数据
        var data = getData();
        // console.log(data);
        var index = $(this).attr("id");
        // console.log(index);
        //删除  从哪个位置开始删除 删除几个元素
        data.splice(index, 1);
        saveData(data);
        load();
    })

    //判断正在完成和进行
    $(".center ol,.center ul").on("click", "input", function () {
        //先读取本地数据
        var data = getData();
        //修改数据
        var index = $(this).siblings("a").attr("id");
        data[index].done = $(this).prop("checked");
        //保存
        saveData(data);
        load();

    })
    //读取本地存储数据
    function getData() {
        var data = localStorage.getItem('todo');
        if (data !== null) {
            //本地存储是字符串形式的，要转化为对象
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    //保存本地存储
    function saveData(data) {
        // 对象转换为字符串
        localStorage.setItem("todo", JSON.stringify(data))
    }

    //页面渲染
    function load() {
        var data = getData();
        // console.log(data);
        //先清空
        $(".center ol,.center ul").empty();
        var doing = 0;
        var finish = 0;
        $.each(data, function (i, ele) {
            // console.log(ele);
            //添加判断条件
            if (ele.done) {
                $(".center ul").prepend("<li><input type = 'checkbox' checked='checked' class='check'> <p>" + ele.title + "</p> <a href='javascript:;' id=" + i + "><a></li>");
                finish++;
            } else {
                $(".center ol").prepend("<li><input type = 'checkbox' class='check'> <p>" + ele.title + "</p> <a href='javascript:;' id=" + i + "><a></li>");
                doing++;
            }

        })
        $(".doing").text(doing);
        $(".finish").text(finish);
    }

    //back区域
    $(".footer a").eq(1).click(function () {
        $(".back").fadeIn()
    })
    $(".footer a").eq(1).siblings().click(function () {
        $(".back").hide();
    })
    $(".back").click(function () {
        $("html, body").stop().animate({//animate是元素动画
            scrollTop: 0
        })
    })

})

